<template>
    <ul>

        <!-- <router-link tag="li" :to="'/home/goodslist/goods' + v.id" v-for="v in goodsList" :key="v.id">
            <img :src="v.img_url">
            <h1>{{ v.title }}</h1>
            <div class="price">
                <output>￥{{ v.sell_price }}</output>
                <s>￥{{ v.market_price }}</s>
                <div>
                    <strong>热卖中</strong>
                    <em>剩 {{ v.stock_quantity }} 件</em>
                </div>
            </div>
        </router-link> -->

        <!-- 在网页中有两种跳转方式：
        1. 标签跳转：使用 a 标签的形式  （上面的路由也是这种形式）
        2. 编程式跳转：使用 window.location.href 的形式 -->

        <li v-for="v in goodsList" :key="v.id" @click="toGoods(v.id)">
            <img :src="v.img_url">
            <h1>{{ v.title }}</h1>
            <div class="price">
                <output>￥{{ v.sell_price }}</output>
                <s>￥{{ v.market_price }}</s>
                <div>
                    <strong>热卖中</strong>
                    <em>剩 {{ v.stock_quantity }} 件</em>
                </div>
            </div>
        </li>

    </ul>
</template>

<script>
    export default {
        data () {
            return {
                goodsList: [],
                pageNum: 1,
            }
        },
        created () {
            this.getGoodsList();
        },
        methods: {
            getGoodsList () {
                this.$http.get('api/getgoods?pageindex=' + this.pageNum).then(res => {
                    if (res.body.status === 0) {
                        // this.goodsList = res.body.message; 同样要获取更多需要拼接
                        this.goodsList = this.goodsList.concat( res.body.message );
                    } else {
                        this.$toast('获取商品列表失败')
                    }
                })
            },
            toGoods ( id ) {  // 编程式导航的函数  $route 是路由的参数对象, $router 是路由的导航对象
                // this.$router.push( '/home/goodslist/goods' + id )
                // 命名路由---->就是给路由起个名字，在路由配置规则里给个名字，拿来这里调用，有名字的话应该可跳向指定的页面，应该有这样的一个逻辑存在
                this.$router.push( { name: 'goods-router-name', params:{ id } } )
            },
        },
    }
</script>

<style lang="scss" scoped>
    ul {
        list-style: none;
        padding: 7px 7px 0;
        margin: 0;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
            width: 49%;
            background-color: #eee;
            margin-bottom: 7px;
            border: 1px solid #ccc;
            box-shadow: 0 0 3px 1px #ccc;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 260px;
            img {
                vertical-align: top;
                width: 100%;
            }
            h1 {
                font-size: 14px;
                padding: 0 2px;
            }
            .price {
                font-size: 12px;
                margin: 2px;
                padding: 5px;
                background-color: #ddd;
                color: #888;
                output {
                    color: #f00;
                    font-size: 13px;
                    display: inline-block;
                    margin-right: 5px;
                    font-weight: 600;
                }
                div {
                    display: flex;
                    justify-content: space-between;
                    strong {
                        font-weight: 400;
                    }
                    em {
                        font-style: normal;
                    }
                }
                
            }
        }
    }
</style>